<template>
	<view>
		<!-- 地址 -->
		<navigator url="../../pagesU/address/address?source=1" class="address-section">
			<view class="order-content">
				<text class="yticon icon-shouhuodizhi"></text>
				<view class="cen" v-if="addressData">
					<view class="top">
						<text class="name">{{ addressData.name }}</text>
						<text class="mobile">{{ addressData.phoneNumber }}</text>
					</view>
					<text class="address">{{ addressData.province }}-{{ addressData.city }}-{{ addressData.region }}-{{ addressData.detailAddress }}</text>
				</view>
				<view class="cen" v-else>
					<text>请设置收货地址</text>
					<!-- <view class="top">
                         <text class="name">{{ addressData.name }}</text>
                         <text class="mobile">{{ addressData.phoneNumber }}</text>
                     </view>
                     <text class="address">{{ addressData.province }}-{{ addressData.city }}-{{ addressData.region }}-{{ addressData.detailAddress }}</text> -->
				</view>
				<text class="yticon icon-you"></text>
			</view>

			<image
					class="a-bg"
					src=""
			></image>
		</navigator>

		<view class="goods-section" v-for="(item1, index1) in confirmOrderResultList" :key="index1">
			<view class="g-header b-b">
				<image class="logo" src="/static/temp/nav1.png"></image>
				<text class="name"> 共{{ item1.cartPromotionItemList.length }}件商品,店铺 【{{item1.storeName }}】</text>
				<text class="name" v-if="groupActivity">团购-{{groupActivity.name}}</text>
			</view>
			<!-- 商品列表 -->
			<view class="g-item" v-for="(item, index) in item1.cartPromotionItemList" :key="index">
				<image :src="item.productPic"></image>
				<view class="right">
					<text class="title clamp">{{ item.productName }}</text>
					<text class="spec" v-if="item.productAttr">{{ item.productAttr  || '基础款'}}</text>
					<view class="price-box">
						<text class="price">￥{{ item.price }}</text>
						<text class="number">x {{ item.quantity }}</text>
					</view>
				</view>
			</view>
			<view class="yt-list">
                        <view class="yt-list-cell b-b" v-if="item1.couponHistoryDetailList.length > 0" @click="toggleMask('show',item1.couponHistoryDetailList)">
                            <view class="cell-icon">券</view>
                            <text class="cell-tit clamp">优惠券</text>
                            <text class="cell-tip active">选择优惠券</text>
                            <text class="cell-more wanjia wanjia-gengduo-d"></text>
                        </view>
                        <view class="yt-list-cell b-b" v-if="item1.coupon">
                            <text class="cell-tit clamp">商家促销</text>
                            <view class="cell-tip hb" v-if="item1.coupon.minPoint">满{{item1.coupon.minPoint}}减{{item1.coupon.amount}}</view>
                            <text class="cell-tip disabled"  v-if="!item1.coupon">暂无可用优惠</text>
                        </view>
                    </view>
			<!-- 金额明细 -->
			<view class="yt-list">
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">商品金额</text>
					<text class="cell-tip">￥{{ item1.calcAmount.totalAmount }}</text>
				</view>

				<view class="yt-list-cell b-b" v-if="item1.calcAmount.promotionAmount>0">
					<text class="cell-tit clamp">优惠金额</text>
					<text class="cell-tip red">-￥{{ item1.calcAmount.promotionAmount }}</text>
				</view>

				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">运费</text>
					<text class="cell-tip">{{item1.calcAmount.freightAmount}}</text>
				</view>
				<view class="yt-list-cell desc-cell">
					<text class="cell-tit clamp">备注</text>
					<input class="desc" type="text" v-model="item1.desc" placeholder="请填写备注信息" placeholder-class="placeholder" />
				</view>

			</view>
		</view>
<view class="yt-list">
				<view class="yt-list-cell b-b">
					  <text class="cell-tit clamp">赠送积分</text>
                      <text class="cell-tip">{{totalJifen}}</text>
				</view>
</view>


		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>实付款</text>
				<text class="price-tip">￥</text>
				 <text class="price">{{ (totalPayAmount-totalCouponAmunt)>0?(totalPayAmount-totalCouponAmunt):0.01 }}</text>
			</view>
			<text class="submit" @click="submit">提交订单</text>
		</view>

 <!-- 优惠券面板 -->
                        <view class="mask" :class="maskState === 0 ? 'none' : maskState === 1 ? 'show' : ''" @click="toggleMask">
                            <view class="mask-content" @click.stop.prevent="stopPrevent">
                                <!-- 优惠券页面，仿mt -->
                                <view class="coupon-item" v-if="couponList.length > 0" v-for="(item, index) in couponList" :key="index">
                                    <view class="con" @click="selectCoupon(item)">
                                        <view class="left">
                                            <text class="title">{{ item.name }}</text>
                                            <text class="time">有效期至{{item.coupon.endTime | formatCreateTime}}</text>
                                        </view>
                                        <view class="right">
                                            <text class="price">{{ item.coupon.amount }}</text>
                                            <text>满{{item.coupon.minPoint}}可用</text>
                                        </view>

                                        <view class="circle l"></view>
                                        <view class="circle r"></view>
                                    </view>
                                    <text class="tips">限新用户使用</text>
                                </view>
                            </view>
                        </view>
	</view>
</template>

<script>
	import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import { formatDate } from '@/common/date';
	import { mapState } from 'vuex';
	export default {
	components: {
    		mallplusCopyright
    	},
		data() {
			return {
				maskState: 0, //优惠券面板显示状态
				desc: '', //备注
				payType: 1, //1微信 2支付宝
				type: 1,
				groupType: '',
				memberIntegration:0,
				groupActivityId:'',
				totalPayAmount: 0,
				basicGiftsVar:'',
				skillId:0,
				 totalJifen:0,
				goodsId: 0,
				mgId: 1,
				cartId: '',
				cartIds: '',
				addressId: '',
				couponId: '',
				totalCouponAmunt:0,
				memberCouponId:'',
				coupon:{
					amount:0,
					coupon:{
						amount:0
					}
				},
				groupActivity:null,
				memberReceiveAddressList: [],
				basicGiftsList:[],
				cartPromotionItemList: [],
				confirmOrderResultList: [],
				calcAmount: {
					totalAmount: 0,
					freightAmount: 0,
					promotionAmount: 0,
					payAmount: 0
				},
				couponList: [],
				addressData: {
					name: null,
					phoneNumber: '',
					detailAddress: '',
					region: ''
				}
			};
		},
		 async onLoad(opt) {
                    let option = JSON.parse(opt.dataJson);
			let data;
			this.type = option.type;
			if (option.groupActivityId) { // 团购
				let params = { groupId: option.groupActivityId };
				data = await Api.apiCall('get', Api.order.preGroupActivityOrder, params);
				this.groupActivityId=option.groupActivityId;
				this.groupActivity=data.groupActivity;
				this.type = 1;
			}else{
				if (option.groupType) { // 拼团
					this.groupType = option.groupType;
					this.goodsId = option.id;
					this.mgId = option.mgid;

					if (option.skuId) {
						let params = { groupId: option.groupId, goodsId: option.id, skuId: option.skuId };
						data = await Api.apiCall('post', Api.order.addGroup, params);
					} else {
						let params = { groupId: option.groupId, goodsId: option.id };
						data = await Api.apiCall('post', Api.order.addGroup, params);
					}
				} else {
					if (option.type == 1) { // 详情
						this.cartId = option.id;
						let params = { goodsId: option.goodsId,skuId: option.goodsId, type: option.type };
						data = await Api.apiCall('get', Api.order.submitStorePreview, params);
					} else if (option.type == 2) { // 购物车
						let params = { cartIds: option.cartIds, type: option.type };
						data = await Api.apiCall('get', Api.order.submitStorePreview, params);
						this.cartIds = option.cartIds;
					}else if (option.type == 6) { // 秒杀
						let params = { skillId: option.skillId, type: option.type };
						data = await Api.apiCall('get', Api.order.submitStorePreview, params);
						this.skillId = option.skillId;
					}
				}

			}
			this.totalPayAmount = data.totalPayAmount;
            this.totalJifen=data.totalJifen;

			this.confirmOrderResultList = data.confirmOrderResultList;
			this.confirmOrderResultList.forEach(item3 => {
			    item3.desc='';
			});
			this.calcAmount = data.calcAmount;

			this.addressData = data.address;
			if (this.addressData) {
				this.addressId = this.addressData.id;
			}

			this.couponList = data.couponHistoryDetailList;
			this.memberReceiveAddressList = data.memberReceiveAddressListaddress;

		},
		computed: {
			...mapState([ 'userInfo'])
		},
			filters: {

        	              formatCreateTime(time) {
        	                let date = new Date(time);
        	                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
        	              },
        	            },
		methods: {
		 getSource(){
                          let source =Api.source;
                         return source;
                },
			selectCoupon(item){

			        this.confirmOrderResultList.forEach(item3 => {
			        console.log(item3)
            			   if(item.storeId==item3.storeId){
            			   item3.coupon=item.coupon;
                           				item3.couponId= item.couponId;
                           				item3.memberCouponId=item.id;
            			   }
            			});

            					this.totalCouponAmunt=0;
this.confirmOrderResultList.forEach(item4 => {
if(item4.coupon){
this.totalCouponAmunt=this.totalCouponAmunt+item4.coupon.amount;
}
console.log(this.totalCouponAmunt)

});
				this.toggleMask();
			},
			//显示优惠券面板
			toggleMask(type,item) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.maskState = 2;
                this.couponList=item;
				setTimeout(() => {
					this.maskState = state;
				}, timer);
			},
			numberChange(data) {
				this.number = data.number;
			},
			changePayType(type) {
				this.payType = type;
			},
			async submit() {
				console.log('dubmit')
				let data;
				if (!this.addressId) {
					this.$api.msg('请选择收货地址');
					return;
				}
				let params = {};

				// 拼团
				if (this.groupType) {
					if (!this.mgId) {
						this.mgId = 1;
					}

					 params = {
						mgId: this.mgId,
						groupType: this.groupType,
						type: 1,
						orderType:2,
						goodsId: this.goodsId,
						addressId: this.addressId,
						couponId: this.couponId,
						memberCouponId: this.memberCouponId,
						content: this.desc
					};
					 params.source = this.getSource();
					data = await Api.apiCall('post', Api.order.acceptGroup, params);
				} else {
					// detail
					if (this.type == 1) {
						 params = {basicGiftsVar:this.basicGiftsVar,orderType:1, type: 1, goodsId: option.goodsId,skuId: option.goodsId, addressId: this.addressId, couponId: this.couponId,memberCouponId: this.memberCouponId, content: this.desc };
						if (this.groupActivityId) {
							params = {groupActivityId:this.groupActivityId,orderType:3, type: 1, goodsId: option.goodsId,skuId: option.goodsId, addressId: this.addressId, couponId: this.couponId,memberCouponId: this.memberCouponId, content: this.desc };
						}
						 params.source = this.getSource();
						data = await Api.apiCall('post', Api.order.generateStoreOrder, params);
					}
					// 购物车
					if (this.type == 2) {
					var goods_list1 =[];
					            this.confirmOrderResultList.forEach(item => {
					            var itemmm = {
                                        				    storeId:item.storeId,
                                        					couponId: item.couponId,
                                                            memberCouponId:item.memberCouponId,
                                                            desc: item.desc,
                                        				}
                                        				goods_list1.push(itemmm);

                                			});
						 params = {orderType:1, type: 2, cartIds: this.cartIds, addressId: this.addressId, couponId: this.couponId, storeData: JSON.stringify(goods_list1) };
						 params.source = this.getSource();
						data = await Api.apiCall('post', Api.order.generateStoreOrder, params);
					}

					// 秒杀
					if (this.type == 6) {
						 params = { type: 6, skillId: this.skillId, addressId: this.addressId, couponId: this.couponId, content: this.desc ,orderType:6};
						 params.source = this.getSource();
						data = await Api.apiCall('post', Api.order.generateStoreOrder, params);
					}
				}

				if (data && data.order) {
					let id = data.order.id;
					// let url = `/pages/money/pay?id=${id}`;
					let url = '/pages/order/payment/index?order_id=' + data.order.id + '&type=1' ;

					uni.navigateTo({
						url: url
					});
				} else {
					this.$api.msg(data);
				}
			},
			stopPrevent() {}
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 100upx;
	}

	.address-section {
		padding: 30upx 0;
		background: #fff;
		position: relative;

		.order-content {
			display: flex;
			align-items: center;
		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90upx;
			color: #888;
			font-size: 44upx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28upx;
			color: $font-color-dark;
		}

		.name {
			font-size: 34upx;
			margin-right: 24upx;
		}

		.address {
			margin-top: 16upx;
			margin-right: 20upx;
			color: $font-color-light;
		}

		.icon-you {
			font-size: 32upx;
			color: $font-color-light;
			margin-right: 30upx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5upx;
		}
	}

	.goods-section {
		margin-top: 16upx;
		background: #fff;
		padding-bottom: 1px;

		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;
		}

		.logo {
			display: block;
			width: 50upx;
			height: 50upx;
			border-radius: 100px;
		}

		.name {
			font-size: 30upx;
			color: $font-color-base;
			margin-left: 24upx;
		}

		.g-item {
			display: flex;
			margin: 20upx 30upx;

			image {
				flex-shrink: 0;
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 4upx;
			}

			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
			}

			.title {
				font-size: 30upx;
				color: $font-color-dark;
			}

			.spec {
				font-size: 26upx;
				color: $font-color-light;
			}

			.price-box {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: $font-color-dark;
				padding-top: 10upx;

				.price {
					margin-bottom: 4upx;
				}
				.number {
					font-size: 26upx;
					color: $font-color-base;
					margin-left: 20upx;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}
	.yt-list {
		margin-top: 16upx;
		background: #fff;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 40upx;
		line-height: 70upx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}
		}

		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $font-color-light;
			margin-left: 8upx;
			margin-right: -10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: $font-color-light;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: 26upx;
			color: $font-color-dark;

			&.disabled {
				color: $font-color-light;
			}

			&.active {
				color: $base-color;
			}
			&.red {
				color: $base-color;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}

		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}
	}

	/* 支付列表 */
	.pay-list {
		padding-left: 40upx;
		margin-top: 16upx;
		background: #fff;
		.pay-item {
			display: flex;
			align-items: center;
			padding-right: 20upx;
			line-height: 1;
			height: 110upx;
			position: relative;
		}
		.icon-weixinzhifu {
			width: 80upx;
			font-size: 40upx;
			color: #6bcc03;
		}
		.icon-alipay {
			width: 80upx;
			font-size: 40upx;
			color: #06b4fd;
		}
		.icon-xuanzhong2 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			font-size: 40upx;
			color: $base-color;
		}
		.tit {
			font-size: 32upx;
			color: $font-color-dark;
			flex: 1;
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
		.price-content {
			padding-left: 30upx;
		}
		.price-tip {
			color: $base-color;
			margin-left: 8upx;
		}
		.price {
			font-size: 36upx;
			color: $base-color;
		}
		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 280upx;
			height: 100%;
			color: #fff;
			font-size: 32upx;
			background-color: $base-color;
		}
	}

	/* 优惠券面板 */
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: 0.3s;

		.mask-content {
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: 0.3s;
			overflow-y: scroll;
		}
		&.none {
			display: none;
		}
		&.show {
			background: rgba(0, 0, 0, 0.4);

			.mask-content {
				transform: translateY(0);
			}
		}
	}

	/* 优惠券列表 */
	.coupon-item {
		display: flex;
		flex-direction: column;
		margin: 20upx 24upx;
		background: #fff;
		.con {
			display: flex;
			align-items: center;
			position: relative;
			height: 120upx;
			padding: 0 30upx;
			&:after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}
		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100upx;
		}
		.title {
			font-size: 32upx;
			color: $font-color-dark;
			margin-bottom: 10upx;
		}
		.time {
			font-size: 24upx;
			color: $font-color-light;
		}
		.right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: $font-color-base;
			height: 100upx;
		}
		.price {
			font-size: 44upx;
			color: $base-color;
			&:before {
				content: '￥';
				font-size: 34upx;
			}
		}
		.tips {
			font-size: 24upx;
			color: $font-color-light;
			line-height: 60upx;
			padding-left: 30upx;
		}
		.circle {
			position: absolute;
			left: -6upx;
			bottom: -10upx;
			z-index: 10;
			width: 20upx;
			height: 20upx;
			background: #f3f3f3;
			border-radius: 100px;
			&.r {
				left: auto;
				right: -6upx;
			}
		}
	}
	/* 分类推荐楼层 */
	.hot-floor {
		width: 100%;
		overflow: hidden;
		margin-bottom: 20upx;
		.floor-img-box {
			width: 100%;
			height: 220upx;
			position: relative;
			display: flex;
			&:after {
				padding: 10 30upx;
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);
			}
		}
		.name {
			font-size: 30upx;
			color: $font-color-base;
			margin-left: 24upx;
		}
		.floor-img {
			width: 100%;
			height: 100%;
		}
		.floor-list {
			white-space: nowrap;
			padding: 20upx;
			padding-right: 50upx;
			border-radius: 6upx;
			margin-top: -140upx;
			margin-left: 30upx;
			background: #fff;
			box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
			position: relative;
			z-index: 1;
		}
		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}
		.floor-item {
			width: 180upx;
			margin-right: 20upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			line-height: 1.8;
			image {
				width: 180upx;
				height: 180upx;
				border-radius: 6upx;
			}
			.price {
				color: $uni-color-primary;
			}
		}
		.more {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			flex-shrink: 0;
			width: 180upx;
			height: 180upx;
			border-radius: 6upx;
			background: #f3f3f3;
			font-size: $font-base;
			color: $font-color-light;
			text:first-child {
				margin-bottom: 4upx;
			}
		}
	}
</style>
